<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>

    <link rel="stylesheet" type="text/css" href="../css/aui2.1/aui.css" />
    <link rel="stylesheet" type="text/css" href="../script/swiper/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/icon/iconfont.css" />

    <style>
    body{background: #fff;color:#757575;}
    .user-info{position: relative;}
    .user-wrap{position: absolute;top:0;left:0;width: 100%;height: 100%;padding-top:2.3rem;}
    .avatar{width:4rem;height:4rem;margin: 0 auto;}
    .avatar img{border-radius: 50%;overflow: hidden;}
    .jifennum{font-size: 1.1rem;color:#fff;text-align: center;}
    .jifen{font-size: 0.6rem;background: #fff;color:#7fd361;text-align: center;width: 2rem;margin:0 auto;border-radius: 0.3rem;}

    .padding-5{padding:0 0.75rem;border-bottom:1px solid #eee;line-height: 1.5rem;}
    .aui-grid [class*=aui-col-]{padding:0;}
    .aui-grid .iconfont{font-size: 1rem;}
    .border-b-5{border-bottom: 0.5rem solid #f4f6f5;}
    .aui-list{background-size: 100% 0px;}
    .aui-list.aui-list-in .aui-list-item{background-size: 100% 0px;border-bottom: 1px solid #eee;}

    .aui-bar-tab .aui-active{color:#80d174;}
    #footer{border-top: 1px solid #ddd;box-sizing: border-box;}
    #footer .iconfont{font-size: 1rem;}
    .aui-bar-tab .aui-bar-tab-label{font-size: 0.5rem;}

    .aui-list .icon{color:#7dc861;}
    .aui-list .aui-list-item-title{color:#666;}

    </style>
</head>

<body>

  <!-- 顶部 -->
  <section class="aui-content bg-white aui-margin-b-15">
      <div class="user-info">
          <img src="../image/m_01.png" alt="">
          <div class="user-wrap">
            <div class="avatar"><img src="../image/pic_05.png" alt=""></div>
            <div class="jifennum">6678</div>
            <div class="jifen">积分</div>
          </div>
      </div>
      <div class="padding-5">我的订单</div>
      <div class="aui-grid aui-margin-t-15 border-b-5">
          <div class="aui-row">
              <div class="aui-col-5">
                  <i class="icon iconfont icon-daifukuan1"></i>
                  <div class="aui-grid-label aui-font-size-12">待付款</div>
              </div>
              <div class="aui-col-5">
                  <i class="icon iconfont icon-huowu"></i>
                  <div class="aui-grid-label aui-font-size-12">待发货</div>
              </div>
              <div class="aui-col-5">
                  <i class="icon iconfont icon-wodedingdan16"></i>
                  <div class="aui-grid-label aui-font-size-12">待收货</div>
              </div>
              <div class="aui-col-5">
                  <i class="icon iconfont icon-daishouhuo"></i>
                  <div class="aui-grid-label aui-font-size-12">已发货</div>
              </div>
              <div class="aui-col-5">
                  <i class="icon iconfont icon-qian2-copy-copy-copy-copy"></i>
                  <div class="aui-grid-label aui-font-size-12">退货/售后</div>
              </div>
          </div>
      </div>
      <ul class="aui-list aui-list-in ">
        <li class="aui-list-item" tapmode onclick="mycollect()">
            <div class="aui-list-item-label-icon">
              <i class="icon iconfont icon-fahuotixing"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的收藏</div>
            </div>
        </li>
        <li class="aui-list-item" tapmode onclick="mycollect()">
            <div class="aui-list-item-label-icon">
              <i class="icon iconfont icon-gerenziliao"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的收藏</div>
            </div>
        </li>
        <li class="aui-list-item" tapmode onclick="mycollect()">
            <div class="aui-list-item-label-icon">
              <i class="icon iconfont icon-xingxing"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的收藏</div>
            </div>
        </li>
        <li class="aui-list-item" tapmode onclick="mycollect()">
            <div class="aui-list-item-label-icon">
              <i class="icon iconfont icon-zuji"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的收藏</div>
            </div>
        </li>
      </ul>

  </section>

  <footer class="aui-bar aui-bar-tab" id="footer">
      <div class="aui-bar-tab-item" tapmode>
          <i class="icon iconfont icon-weibiaoti--"></i>
          <div class="aui-bar-tab-label">首页</div>
      </div>
      <div class="aui-bar-tab-item" tapmode>
          <i class="icon iconfont icon-fenlei"></i>
          <div class="aui-bar-tab-label">分类</div>
      </div>
      <div class="aui-bar-tab-item" tapmode>
          <!-- <div class="aui-badge">2</div> -->
          <i class="icon iconfont icon-gouwucheman"></i>
          <div class="aui-bar-tab-label">购物车</div>
      </div>
      <div class="aui-bar-tab-item  aui-active" tapmode>
          <i class="icon iconfont icon-wode"></i>
          <div class="aui-bar-tab-label">我的</div>
      </div>
  </footer>

</body>

</html>
<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../script/swiper/swiper.min.js"></script>

<script type="text/javascript">
  $(function(){


  })


</script>
